<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星夜空</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        night: '#0a0e17',
                        star: '#e0e0e0',
                        meteor: '#ffffff',
                        footer: '#1a243c',
                        highlight: '#3b82f6',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .star {
                position: absolute;
                background-color: theme('colors.star');
                border-radius: 50%;
                animation: twinkle 2s infinite alternate;
            }
            .meteor {
                position: absolute;
                background: linear-gradient(90deg, transparent, theme('colors.meteor'));
                border-radius: 50%;
                z-index: 10;
            }
            .备案信息-hover {
                transition: all 0.3s ease;
            }
            .备案信息-hover:hover {
                transform: translateY(-2px);
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
            }
        }

        @keyframes twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="bg-night min-h-screen overflow-x-hidden relative">
    <!-- 夜空背景 -->
    <div id="stars" class="absolute inset-0"></div>
    
    <!-- 页面内容 -->
    <div class="relative z-20 flex flex-col items-center justify-center min-h-screen px-4 text-white text-center">
        <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold mb-6 tracking-tight">流星划过夜空</h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] max-w-2xl opacity-80 mb-10">
            每一颗流星都是宇宙的信使，带来远方的祝福与希望
        </p>
        <button class="bg-white/10 hover:bg-white/20 backdrop-blur-sm px-6 py-3 rounded-full transition-all duration-300 flex items-center gap-2">
            <i class="fa fa-moon-o"></i>
            <span>许下心愿</span>
        </button>
    </div>
    
    <!-- 底部备案信息（醒目版本） -->
    <footer class="relative z-30 bottom-0 left-0 right-0 py-6 px-6 bg-footer text-white shadow-[0_-2px_10px_rgba(59,130,246,0.2)]">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-2 text-highlight font-medium">网站备案信息</div>
            <div class="flex flex-col md:flex-row justify-center items-center gap-4 md:gap-8 text-base">
                <div class="flex items-center gap-2 备案信息-hover">
                    <i class="fa fa-globe text-blue-400 text-lg"></i>
                    <a href="https://beian.miit.gov.cn/" target="_blank" class="font-medium hover:text-blue-300 transition-colors">
                        ICP备案号：陕ICP备2024038486号-2号
                    </a>
                </div>
                <div class="flex items-center gap-2 备案信息-hover">
                    <i class="fa fa-shield text-green-400 text-lg"></i>
                    <a href="http://www.beian.gov.cn/" target="_blank" class="font-medium hover:text-green-300 transition-colors">
                        陕公网安备61011602000678号
                    </a>
                </div>
                <div class="flex items-center gap-2">
                    <i class="fa fa-copyright"></i>
                    <span>版权所有 © 2024 公司名称. All Rights Reserved.</span>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 创建星星
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = window.innerWidth < 768 ? 100 : 200;
            
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                
                // 随机位置
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                
                // 随机大小
                const size = Math.random() * 2 + 1;
                
                // 随机动画延迟
                const delay = Math.random() * 5;
                
                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.animationDelay = `${delay}s`;
                
                starsContainer.appendChild(star);
            }
        }
        
        // 创建流星（已修正方向）
        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.classList.add('meteor');
            
            // 随机位置和大小 - 流星从上方出现
            const startX = Math.random() * 50 + 25; // 限制在中间50%区域
            const startY = Math.random() * 20; // 从顶部20%区域开始
            const length = Math.random() * 150 + 80; // 更长的流星
            const width = Math.random() * 2 + 1;
            const angle = Math.random() * 30 + 120; // 修正角度，使流星向下划过
            
            // 随机动画持续时间
            const duration = Math.random() * 2 + 1;
            
            meteor.style.left = `${startX}%`;
            meteor.style.top = `${startY}%`;
            meteor.style.width = `${length}px`;
            meteor.style.height = `${width}px`;
            meteor.style.transform = `rotate(${angle}deg)`;
            meteor.style.animation = `meteor ${duration}s linear forwards`;
            
            // 添加流星动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes meteor {
                    0% {
                        transform: rotate(${angle}deg) translateX(0);
                        opacity: 1;
                    }
                    100% {
                        transform: rotate(${angle}deg) translateX(${length * 2}px);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
            
            document.body.appendChild(meteor);
            
            // 动画结束后移除流星和样式
            setTimeout(() => {
                meteor.remove();
                style.remove();
            }, duration * 1000);
        }
        
        // 初始化
        createStars();
        
        // 定时创建流星
        setInterval(createMeteor, 1500);
        
        // 窗口大小改变时重新创建星星
        window.addEventListener('resize', () => {
            document.getElementById('stars').innerHTML = '';
            createStars();
        });
    </script>
</body>
</html>
    